<script setup>
import {computed, onMounted, ref, watch} from "vue";
import {DFT_ICONS} from "@jzl/icons";
import _ from 'lodash'
import { useLowcodeHand } from '@jzl/comps-mg/src/page/hooks/useLowcodeHand.js'

defineOptions({
  name: "BuilderNodesLowcode"
});

const props = defineProps({
  // currentItemElCode: String,
  currentEleData: Object,

  currentPage: {
    type: Object
  },
  // lowcode: Object
})

const { lowcode, handlerXList, handlerList, handleShowLowcodeWin } = useLowcodeHand(props)

</script>
<template>
  <div
    class="elem-design-prop-logic pt-2"
    v-if="currentEleData?._low"
  >
    <h5><span>显示逻辑</span>
      <a
        href="javascript:;"
        class="logic-low-link"
        @click="handleShowLowcodeWin"
      ><JIcon :icon="DFT_ICONS.code" /> 低码开发</a>
    </h5>
    <div class="elem-design-prop-logic-item">
      <el-radio-group
        size="small"
        v-model="currentEleData._low.sType"
        class="logic-low-type"
      >
        <el-radio-button label="formula">公式</el-radio-button>
        <el-radio-button label="lowcode">低码</el-radio-button>
      </el-radio-group>
      <FormulaInput
        v-if="currentEleData._low.sType === 'formula'"
        placeholder="配置公式"
        v-model="currentEleData._low.sFormula"
        size="small"
        class="logic-low-input"
      />
      <el-select
        v-else-if="currentEleData._low.sType === 'lowcode'"
        v-model="currentEleData._low.show"
        size="small"
        class="logic-low-input"
        clearable
        placeholder="选择低码函数"
      >
        <el-option
          v-for="(h, idx) in handlerXList"
          :value="h.funcName"
        >
          {{ h.funcName }}<span style="font-size: 12px;color: #AAA;font-weight: normal;">（{{ h.name }}）</span>
        </el-option>
        <hr style="margin: 8px 0px;" v-if="handlerList?.length && handlerXList?.length"/>
        <el-option
          v-for="(h, idx) in handlerList"
          :value="h"
          :label="h"
        />
      </el-select>
    </div>
    <!--<div class="elem-design-prop-logic-item" v-else>
        <a href="javascript:;" class="logic-low-link"><i class="fa fa-code"></i> 低码开发</a>
    </div>-->
    <h5>
      <span>激活逻辑</span>
      <a href="javascript:;"
         class="logic-low-link"
         @click="handleShowLowcodeWin"
      ><JIcon :icon="DFT_ICONS.code" /> 低码开发</a>
    </h5>
    <div class="elem-design-prop-logic-item">
      <el-radio-group
        size="small"
        v-model="currentEleData._low.aType"
        class="logic-low-type"
      >
        <el-radio-button label="formula">公式</el-radio-button>
        <el-radio-button label="lowcode">低码</el-radio-button>
      </el-radio-group>
      <FormulaInput
        v-if="currentEleData._low.aType === 'formula'"
        placeholder="配置公式"
        v-model="currentEleData._low.aFormula"
        size="small"
        class="logic-low-input"
      />
      <el-select
        v-else-if="currentEleData._low.aType === 'lowcode'"
        v-model="currentEleData._low.active"
        size="small"
        class="logic-low-input"
        clearable
        placeholder="选择低码函数"
      >
        <el-option
          v-for="(h, idx) in handlerXList"
          :value="h.funcName"
        >
          {{ h.funcName }}<span style="font-size: 12px;color: #AAA;font-weight: normal;">（{{ h.name }}）</span>
        </el-option>
        <hr
          style="margin: 8px 0px;"
          v-if="handlerList?.length && handlerXList?.length"
        />
        <el-option
          v-for="(h, idx) in handlerList"
          :value="h"
          :label="h"
        />
      </el-select>
    </div>
  </div>
</template>
